let data = {
  pagenum: 1,
  pagesize: 2,
  // state: ,
  // cate_id: 
}

// 1. --------------------- 查询数据并渲染 --------------------------
function renderArticle() {
  $.ajax({
    url: '/my/article/list',
    data: data,
    success: function (res) {
      // console.log(res);
      if (res.status === 0) {
        showPage(res.total);
        let str = '';
        res.data.forEach(item => {
          str += `
          <tr>
            <td>${item.title}</td>
            <td>${item.cate_name}</td>
            <td>${item.pub_date}</td>
            <td>${item.state}</td>
            <td>
              <a href="./edit.html?id=${item.id}" class="layui-btn layui-btn-xs">编辑</a>
              <button data-id="${item.id}" type="button" class="layui-btn layui-btn-xs layui-btn-danger">删除</button>
            </td>
          </tr>
          `;
        })
        $('tbody').html(str);
      }
    }
  });
}

renderArticle();


// 2. ------------------------------- 分页 ------------------------------------------
function showPage(a) {
  var laypage = layui.laypage;

  //执行一个laypage实例
  laypage.render({
    elem: 'page', // 注意，这里的 test1 是 ID，不用加 # 号
    count: a, // 数据总数，从服务端得到
    limit: data.pagesize, // 每页几条数据
    curr: data.pagenum, // 当前页
    // prev: '<',
    layout: ['limit', 'prev', 'page', 'next', 'count', 'skip'], // 自定义排版
    limits: [2, 3, 5, 10, 15],
    // 切换页码时的回调
    jump: function (obj, first) {
      // 首次不执行
      if (!first) {
        // do something
        // obj包含了当前分页的所有参数，比如：
        // console.log(obj.curr); //得到当前页，以便向服务端请求对应页的数据。
        // console.log(obj.limit); //得到每页显示的条数
        data.pagenum = obj.curr;
        data.pagesize = obj.limit;
        renderArticle();
      }
    }
  });
}


// -------------------------------- 筛选 ------------------------------------------
// 1. 获取真实的分类，渲染到下拉框的位置
$.ajax({
  url: '/my/category/list',
  success: function (res) {
    if (res.status === 0) {
      let str = '';
      res.data.forEach(item => {
        str += `<option value="${item.id}">${item.name}</option>`;
      })
      $('#category').append(str);
      // 必须要更新渲染
      let form = layui.form;
      form.render();
    }
  }
});

// 2. 完成筛选
// 表单提交 --> 阻止默认行为 --> 获取数据(分类id和状态) --> 修改请求参数 --> 调用renderArticle更新页面数据
$('form').on('submit', function (e) {
  e.preventDefault();
  let cate_id = $('#category').val();
  let state = $('#state').val();
  // 判断，是否选择了分类或状态
  if (cate_id) {
    data.cate_id = cate_id;
  } else {
    delete data.cate_id; // 移除对象的属性
  }

  if (state) {
    data.state = state;
  } else {
    delete data.state;
  }

  // 重置页码为1
  data.pagenum = 1;

  renderArticle();
})

// ---------------------------------- 删除 ----------------------------------
$('tbody').on('click', 'button:contains("删除")', function () {
  let id = $(this).data('id');
  // console.log(id); // 2 100 234
  // 询问是否要删除
  layer.confirm('确定要删除吗？', { icon: 3, title: '提示' }, function (index) {
    // do something
    $.ajax({
      url: '/my/article/delete/' + id,  // /my/article/delete/100
      success: function (res) {
        layer.msg(res.message);
        if (res.status === 0) {
          renderArticle();
        }
      }
    });
    layer.close(index); // 关闭弹出层
  });
})